<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path d="M50 100c27.614 0 50-22.386 50-50S77.614 0 50 0 0 22.386 0 50s22.386 50 50 50ZM36.648 23.73c0-6.892 5.692-12.48 12.69-12.48 6.996 0 12.688 5.588 12.688 12.48v7.54c0 4.081-1.995 7.705-5.076 9.982v4.998c0 1.171 3.167 2.165 3.774 2.356l.086.027a105.54 105.54 0 0 1 10.057 5.768L57.154 68.278l-.748.754-1.746 1.756-.998 1.002-2.161-9.947c5.308-7.476-.216-7.928-1.358-8.021l-.057-.005c-.996 0-6.815.335-1.412 8.026l-2.078 9.528-2.327-2.339-1.746-1.756-.581-.585c-1.082-1.088-2.494-1.672-4.074-1.672-1.495 0-2.992.584-4.073 1.672l-.498.501-6.984 7.021H18.75v-8.859c0-1.84.831-3.678 2.244-4.848 7.98-6.605 16.541-10.952 18.287-11.788l.007-.003c.213-.108 2.436-1.228 2.436-2.464v-4.998c-3.08-2.277-5.076-5.9-5.076-9.982v-7.54Zm43.364 33.43.333.334.248.25 1.036 1.042.004.004 1.04 1.045c.248.25.498.501.831.501.165 0 .248 0 .415-.166.5-.25.664-.754.664-1.255.084-1.462.146-2.904.209-4.346v-.003c.062-1.441.125-2.883.208-4.346 0-.835-.333-1.252-1.165-1.252h-.164c-1.454.083-2.929.145-4.403.208h-.001c-1.477.063-2.952.125-4.407.209-.5 0-.915.084-1.165.585-.25.585 0 .835.333 1.17l2.742 2.76-.998 1.003-15.96 16.05-.748.752-1.746 1.755-6.982 7.024-.414-.42-8.397-8.36-1.746-1.755-.498-.501a1.944 1.944 0 0 0-1.413-.585c-.498 0-.998.168-1.412.585l-.5.5-10.057 10.2a1.975 1.975 0 0 0 0 2.759l.497.5a1.94 1.94 0 0 0 1.413.586c.5 0 .998-.166 1.415-.585l8.811-8.861.415.419 8.396 8.442 1.744 1.756.5.5c.415.42.915.586 1.413.586s.998-.166 1.413-.585l.5-.501 8.394-8.442 1.746-1.756.748-.754 15.96-16.048.748-1.005Zm1.33 17.052H68.458l11.553-11.619c.167.168.498.501.998.836.165.585.331 1.255.331 1.924v8.86Z" clip-rule="evenodd" fill-rule="evenodd" data-follow-fill="#0173D7" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Subtract1 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
